<template>
	<view class="u-demo">
		<view class="u-demo-wrap">
			<view class="u-demo-area">
				<u-toast ref="uToast"></u-toast>
				<view class="u-avatar-wrap">
					<imageCropper @ok="confirm" @cancel="cancel" :fixed="true" :url="tempFilePath" :width="200" :height="200"></imageCropper>
					<u-avatar @tap="preAvatar" class="u-avatar-demo" :src="avatar" size="200"></u-avatar>
				</view>
				<u-button @click="chooseAvatar" type="primary">选择图片</u-button>
			</view>
		</view>
		<!-- <view class="u-config-wrap">
			<view class="u-config-title u-border-bottom">
				参数配置
			</view>
			<view class="u-config-item">
				<view class="u-item-title">生成图片质量</view>
				<u-subsection :current="1" :list="['0.3', '0.7', '1']" @change="qualityChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">自定义参数</view>
				<u-subsection :current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
			</view>
		</view> -->
	</view>
</template>

<script>
	import imageCropper from '@/components/image/cropper.vue';
	export default {
		components: {
			imageCropper
		},
		data() {
			return {
				tempFilePath: '',
				avatar: '',
			}
		},
		created() {
			uni.$on('uAvatarCropper', path => {
				this.avatar = path;
				// 可以在此上传到服务端
				// uni.uploadFile({
				// 	url: 'http://192.168.100.17/index.php/index/index/upload',
				// 	filePath: path,
				// 	name: 'file',
				// 	complete: (res) => {
				// 		console.log(res);
				// 	}
				// });
			})
		},
		methods: {
			cancel() {
				this.tempFilePath = '';
			},
			confirm(e) {
				this.tempFilePath = '';
				this.cropFilePath = e.path;
				this.$loading('图片上传…');
				/*this.$app.uploadFile({
					url: this.$api.user.upload,
					filePath: e.path,
					name: 'file',
					formData: {},
					success: res => {
						console.log(res);
						console.log(res.code);
						if (res.code == 0) {
							this.user.avatar_id = res.data.id;
							this.user.avatar_url = res.data.url;
							this.cropFilePath = res.data.url;
						}
						uni.hideLoading();
					}
				});*/
				console.debug('上传图片');
			},
			chooseAvatar() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						this.tempFilePath = res.tempFilePaths.shift();
					}
				});
				console.debug('选择头像');
			},
			// 预览图片
			preAvatar() {
				wx.previewImage({
					current: '', // 当前显示图片的 http 链接
					urls: [this.avatar] // 需要预览的图片 http 链接列表
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
	.wrap {
		padding: 24rpx;
	}

	.u-avatar-wrap {
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.u-avatar-demo {
		width: 150rpx;
		height: 150rpx;
		border-radius: 100rpx;
	}
	/* #ifndef APP-NVUE */
	view,
	text {
		box-sizing: border-box;
	}
	/* #endif */
	
	/* start--演示页面使用的统一样式--start */
	.u-demo {
		padding: 25px 20px;
	}
	
	.u-demo-wrap {
		border-width: 1px;
		border-color: #ddd;
		border-style: dashed;
		background-color: rgb(250, 250, 250);
		padding: 20px 10px;
		border-radius: 3px;
	}
	
	.u-demo-area {
		text-align: center;
	}
	
	.u-no-demo-here {
		color: $u-tips-color;
		font-size: 13px;
	}
	
	.u-demo-result-line {
		border-width: 1px;
		border-color: #ddd;
		border-style: dashed;
		padding: 5px 20px;
		margin-top: 30px;
		border-radius: 5px;
		background-color: rgb(240, 240, 240);
		color: $u-content-color;
		font-size: 16px;
		/* #ifndef APP-NVUE */
		word-break: break-word;
		display: inline-block;
		/* #endif */
		text-align: left;
		
	}
	
	.u-demo-title,
	.u-config-title {
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 20px;
	}
	
	.u-config-item {
		margin-top: 25px;
	}
	
	.u-config-title {
		margin-top: 20px;
		padding-bottom: 5px;
	}
	
	.u-item-title {
		position: relative;
		font-size: 15px;
		padding-left: 8px;
		line-height: 1;
		margin-bottom: 11px;
	}
	
	.u-item-title:after {
		position: absolute;
		width: 4px;
		top: -1px;
		height: 16px;
		/* #ifndef APP-NVUE */
		content: '';
		/* #endif */
		left: 0;
		border-radius: 10px;
		background-color: $u-content-color;
	}
</style>
